<template>
  <el-container class="base-layout" :style="{ backgroundColor: '#f0f6ff' }">
    <el-header class="header">
      <h1 class="title">我们的小鱼塘</h1>
    </el-header>

    <el-container>
      <el-aside class="menu">
        <el-menu :data="menuData" @select="handleMenuSelect"></el-menu>
      </el-aside>

      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'BaseLayout',
  setup() {
    const menuData = ref([
      // 定义您的菜单数据（父子结构），例如：
      {
        index: '1',
        label: '菜单1',
        children: [
          { index: '1-1', label: '子菜单1' },
          { index: '1-2', label: '子菜单2' },
        ],
      },
      {
        index: '2',
        label: '菜单2',
        children: [
          { index: '2-1', label: '子菜单3' },
          { index: '2-2', label: '子菜单4' },
        ],
      },
    ]);

    const handleMenuSelect = (index) => {
      // 根据实际项目需求处理菜单选择逻辑，如跳转对应子路由
      console.log('Selected menu:', index);
    };

    return {
      menuData,
      handleMenuSelect,
    };
  },
});
</script>

<style scoped>
.base-layout {
  height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-size: 24px;
  color: #303133;
  background-color: #ffffff;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.7);
}

.title {
  margin: 0;
}

.menu {
  width: 290px;
  border-right: 1px solid #ebeef5;
  overflow-y: auto;
}

.content {
  padding: 20px;
}
</style>